<head>
  <title>defer in inactive tab</title>
  <meta name="viewport" content="width=device-width">
</head>

<body>
  {{> route}}
</body>

<template name="route">
  {{#if isParent}}
    {{> parent}}
  {{else}}
    {{> child}}
  {{/if}}
</template>

<template name="parent">
  <h1>Test Defer in Inactive Tab</h1>

  <p>
    Step one: open second tab:
    <button id="openTab">Open Tab</button>
  </p>

  <p>
    Step two: run test:
    <button id="runTest">Run Test</button>
  </p>

  <p>
    In a successful test the test status will immediately change to
    "test successful".  (If you switch to the child tab yourself and
    that makes the test claim to be successful, that's actually an
    invalid test because you're letting the child tab become the
    active tab).
  </p>

  <p style="padding: 1em; outline: 1px solid gray">
    Test status: <b>{{testStatus}}</b>
  </p>

  <p>
    After the test has run successfully you can close the child tab.
  </p>

</template>

<template name="child">
  <p>This is the child.</p>
  <p>Switch back to the first tab and run the test.</p>
</template>
